<template>
  <div class="box" id="debugtalk">
    <el-scrollbar  ref="myScrollbar" id="myScrollbar">
        <prism-editor
         class="my-editor height-300"
         v-model="code"
         :highlight="highlighter"
         :line-numbers="lineNumbers"
         :readonly= "true"
        ></prism-editor>
    </el-scrollbar>
  </div>
</template>

<script>
import { getDebugtalk } from '@/api/debugtalk/table'
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere

import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

export default {
   components: {
     PrismEditor
     },
    data() {
      return {
        code: null,
        lineNumbers: true, // true为编辑模式， false只展示不可编辑

    }
  },

  created() {
    this.fetchDebugtalk()
  },

  updated: function() {
      this.scrollDown()
    },

  methods: {
    fetchDebugtalk() {
      getDebugtalk().then(response => {
        this.code = response.data.debugtalk
      })
    },

    highlighter (code) {
        return highlight(code, languages.js)
      },
  }
}
</script>

<style lang="scss" scope>

  .my-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;
    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }

  /* optional class for removing the outline */
  .prism-editor__textarea:focus {
    outline: none;
  }

  /* not required: */
  .height-300 {
    height: 100%;
  }

  .box {
    width: 90%;
    height: 850px;
    margin-left: 85px;
  }

  .box .is-horizontal{
    display: none;
  }

  .box .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
  }

  #myScrollbar{
    margin-top: 30px;
    border:1px solid #96c2f1;background:#eff7ff;
    height: 100%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
  }

  .el-scrollbar__bar{
    &.is-vertical{
      width:15px;
    }
  }

</style>
